<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器  语法: 任意选择器: hover 【悬停】  每个伪类选择器，具备特点
			                所有元素都具备hover功能   【常见伪类选择器】
			 */
			h1:hover{
				color: #ff0000;
				background: #55aaff;
			}
			/* 伪类选择器 :  ① :link     链接未点击时状态
			                ② :active   链接被点击时状态
							③ :visited  链接被点击后状态
							④ :hover    链接悬停时状态
				主要结合在一起，主要针对a元素效果			
							*/
			a:link{  /* 未访问状态  */
				color: #ffb43c;
				/* 去掉超链接下划线 */
				text-decoration: #55aaff;
			}
			a:active{  /* 被点击时状态 */
				color: #ff557f;
				background: #000;
			}
			a:visited{ /* 点击后状态 */
				color: aquamarine;
				background: #ffaa00;
			}
			a:hover{
				font-size: 36px;
			}
			/**
			 * 伪类选择器 input  focus  获取焦点  鼠标点击输入框时的效果
			 * 
			 针对输入框  input元素
			 */
			input:focus{
				background: #ffaa00;
			}
			/*  伪类选择器:  first-child 第一个儿子元素
			                last-child 最后一个儿子元素
							nth-child(n) 匹配n个儿子元素
				针对:  父子级关系  默认父子级关系 table 列表---->
							*/
			li:first-child{
				background: #55aaff;
			}
			li:last-child{
				font-size: 15pt;
			}
			li:nth-child(2){
				background: #ffaa00;
				font-size: 15pt;
			}
			li:nth-child(3){
				background: aliceblue;
				font-size: 20pt;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
		<ol>
			<li>河北</li>
			<li>湖南</li>
			<li>湖北</li>
			<li>河南</li>
		</ol>
	</body>
</html>